<template>
    <div>
        <el-button type="primary" @click="sendInfo()" class="pull-right" style="margin-bottom:10px">发送消息
        </el-button>
        <!--表格内容-->
        <el-table ref="contractList" :data="tableData" style="width: 100%; margin-bottom: 5px" border
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column property="sender" label="发送人" width="150px">
            </el-table-column>
            <el-table-column property="receiver" label="接受方" width="250px">
            </el-table-column>
            <el-table-column property="contents" label="内容" show-overflow-tooltip>
            </el-table-column>
            <!-- <el-table-column property="sendDate" label="发送时间" width="150px" align="center">
            </el-table-column> -->
            <el-table-column label="操作" width="100px" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="rowDel(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer title="消息" ref="drawer" :visible.sync="drawer" direction="rtl" size="30%">
            <el-form :model="formFileds" :rules="rules" ref="formFileds" label-width="100px" class="demo-formFileds">
                <el-form-item label="收件人：" prop="receiver">
                    <el-input type="text" v-model="formFileds.receiver">
                    </el-input>
                </el-form-item>
                <el-form-item label="内容：" prop="contents">
                    <el-input type="textarea" :rows="4" v-model="formFileds.contents">
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-top:50px">
                    <el-button type="primary" @click="send()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button class="pull-right" @click="drawerColse()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <!--分页-->
        <el-pagination :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

    </div>
</template>

<script>
import { selectAll, delelteInfo } from '@/api/systemManage/info';
export default {
    name: "Info",
    components: {

    },
    data () {
        return {
            formFileds: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            pageSizes: [10],
            drawer: false,
            rules: {
                receiver: [{ required: true, message: '请填写收件人', trigger: 'blur,change' }],
                contents: [{ required: true, message: '请填写信息', trigger: 'blur,change' }]
            }
        }
    },
    methods: {

        drawerColse () {
            this.drawer = false
        },
        sendInfo () {
            this.drawer = true
        },
        send () {

        },
        rowDel (id) {
            
            this.$confirm('确定要删除该消息吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                console.log('id',id)
                delelteInfo('id=' + id).then((res) => {
                    this.getList()
                })
            });

        },
        handleSizeChange (e) {
            this.pageSize = e
        },
        handleCurrentChange (e) {
            this.pageNum = e
        },
        getList () {
            selectAll('pageNum=' + this.pageNum + '&pageSize=' + this.pageSize).then((res) => {
                this.tableData = res.data.list
                this.total = res.data.total
                this.pageSizes = []
                let all = Math.ceil(this.total / 10)
                for (let i = 0; i < all; i++) {

                    this.pageSizes.push(10 * (i + 1))
                }
            })
        },

    },
    mounted () {
        this.getList()
    }
}
</script>

<style scoped lang="less">
.el-form {
    padding-top: 50px;
}

.el-date-editor {
    width: 100% !important;
}

.demo-formFileds {
    padding-right: 50px;
}

/deep/.el-drawer__header {
    background-color: #2EB3FF;
    align-items: center;
    color: #fff;
    height: 60px;
    margin-bottom: 15px;
    font-weight: bold;

}
</style>
